<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
<style>

</style>
<body>

<div id="logini-box" style="display: none;">
    <div class="load-bg"></div>
    <div class="load-box">
        <div class="login-box">
            <div class="line-group over-flow">
                <span class="pull-left title">用户登录</span>
                <i class="close iconfont pull-right" style="cursor: pointer" onclick="$('#logini-box').hide()">&nbsp;&nbsp;<!--&#xe60b;--></i>
            </div>
            <div class="line-group over-flow">
                <input type="text" placeholder="账户">
            </div>
            <div class="line-group over-flow">
                <input type="text" placeholder="密码">
            </div>
            <div class="line-group over-flow">
                <input style="width: 38%" type="text" placeholder="验证码">
                <img src="images/yzm.png">
                <span class="change">看不请?换一张</span>
            </div>
            <div class="line-group over-flow">
                <input type="submit" value="登录">
            </div>
            <div class="line-group over-flow">
                <span class="pull-left"><a>忘记密码</a></span>
                <span class="pull-right"><a>注册</a></span>
            </div>
        </div>
    </div>

</div>

<div id="register-box" style="display: none;">
    <div class="load-bg"></div>
    <div class="load-box" style="">
        <div class="login-box" style="">
            <div class="line-group over-flow">
                <span class="pull-left title">用户注册</span>
                <i class="close iconfont pull-right" style="cursor: pointer" onclick="$('#register-box').hide()">&nbsp;&nbsp;<!--&#xe60b;--></i>
            </div>
            <div>
            <div class="line-group over-flow">
                <input type="text" placeholder="用户名">
            </div>
            <div class="line-group over-flow">
                <input type="text" placeholder="真实姓名">
            </div>
            <div class="line-group over-flow">
                <input type="text" placeholder="密码">
            </div>
            <div class="line-group over-flow">
                <ul class="password-status">
                    <li class="active">弱</li>
                    <li>中</li>
                    <li>强</li>
                </ul>
            </div>
            <div class="line-group over-flow">
                <input type="text" placeholder="确认密码">
            </div>
            <div class="line-group over-flow">
                <input type="text" placeholder="邮箱">
            </div>
            <div class="line-group over-flow">
                <input type="text" placeholder="电话">
            </div>
            <div class="line-group over-flow">
                <input type="text" placeholder="联系地址">
            </div>
            <div class="line-group over-flow">
                <input type="text" placeholder="开户银行">
            </div>
            <div class="line-group over-flow">
                <input type="text" placeholder="银行卡号">
            </div>
            <div class="line-group over-flow">
                <input type="text" placeholder="身份证号">
            </div>
            <div class="line-group over-flow">
                <input type="text" placeholder="QQ号">
            </div>
            <div class="line-group over-flow">
                <input style="width: 38%" type="text" placeholder="验证码">
                <img src="images/yzm.png">
                <span class="change">看不请?换一张</span>
            </div>
            <div class="line-group over-flow">
                <span class="agreement active">同意<span style="color: #208ECF">"注册协议"</span></span>
            </div>
                <script>
                    $(function(){
                        $(".line-group .agreement" ).click(function(){
                            if(!$(this ).hasClass('active'))
                            {
                                $(this ).addClass('active')
                            }else{
                                $(this ).removeClass('active');
                            }
                        })
                    })
                </script>
            <div class="line-group over-flow">
                <input type="submit" value="注册">
            </div>
            </div>
        </div>
    </div>

</div>

<div class="top-box">
    <div class="main">
        <div class="top-nav-box over-flow">
            <span class="pull-left">今天是:2016年07月25日&nbsp;&nbsp;星期一</span>
            <span class="pull-right"><a class="login-btn" onclick="$('#logini-box').show()">登陆</a>&nbsp;|&nbsp;<a onclick="$('#register-box').show()">注册</a>&nbsp;|&nbsp;<a>设为首页</a></span>
        </div>
        <div class="nav-box">
            <div class="logo-box pull-left"><img src="images/logo.png"></div>
            <ul class="nav-list pull-left">
                <li class="first-li has-sub">
                    <a class="first-a" href="shouye.html" style="width: 85px;">首页</a>
                    <ul class="sub-nav-box">
                        <li><a>政务网</a></li>
                        <li class="last"><a>活动网</a></li>
                    </ul>
                </li>
                <li class="first-li  has-sub">
                    <a class="first-a" style="" href="pic-2.html" class="">图片</a>
                    <ul class="sub-nav-box ">
                        <li><a>法律法规</a></li>
                        <li><a>交通杂志</a></li>
                        <li><a>交通简讯</a></li>
                        <li><a>交通年鉴</a></li>
                        <li><a>每日网讯</a></li>
                        <li><a>交通志</a></li>
                        <li class="last"><a>其它</a></li>
                    </ul>
                </li>
                <li class="first-li has-sub">
                    <a class="first-a"  href="wendang-sub.html"
style="width: 85px;">文档</a>
                    <ul class="sub-nav-box over-flow">
                        <li><a>公路</a></li>
                        <li><a>水路</a></li>
                        <li><a>铁路</a></li>
                        <li><a>民航</a></li>
                        <li><a>综合管理</a></li>
                        <li class="last"><a>摄影师</a></li>
                    </ul>
                </li>
                <li class="first-li">
                    <a class="first-a" href="shipin-sub.html">视频</a>
                </li>
                <li class="first-li curr"><a class="first-a">文献</a></li>
                <li class="first-li"><a style="color: rgb(51, 51, 51);" href="global-nav.html">全站导航</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="banner clearfix">
    <div class="main">
        <ul class="search-cat">
            <li class="active"><a>图片</a></li>
            <li><a>文档</a></li>
            <li><a>视频</a></li>
        </ul>
        <div>
            <div class="main-search-left-box">
                <input id="search-one" type="text" class="main-search-input" placeholder="请输入关键词"/>
            </div>
            <div>
                <input class="main-search-btn" type="submit" value="搜索"/>
            </div>
            <ul class="pipei-words-list" style="display: none">
                <li><a>匹配关键词</a></li>
                <li><a>匹配关键词</a></li>
                <li><a>匹配关键词</a></li>
                <li><a>匹配关键词</a></li>
                <li><a>匹配关键词</a></li>
            </ul>
        </div>
    </div>

</div>
<script>
    $(function(){
        $(".search-cat li" ).each(function(){
            $(this ).click(function(){
                $(this ).addClass('active').siblings('li' ).removeClass('active')
            })
        })
        $("#search-one" ).focus(function(){
            $(".pipei-words-list" ).show()
        } ).blur(function(){
            $('.pipei-words-list' ).hide()
        })
        $(".title-box .title li" ).each(function(i){
            $(this ).click(function(){
                $(this ).addClass('active').siblings('li' ).removeClass('active')
                $(".content"+i ).show().siblings().hide();
            })
        })
    })
</script>
<div class="main" style="margin-top: 25px;">
    <div class="main-left-box">
        <div class="title-box over-flow">
            <ul class="title">
                <li class="active"><a>图片</a></li>
                <li><a>文档</a></li>
                <li><a>视频</a></li>
            </ul>
        </div>
        <ul class="sub-search over-flow">
            <li class="active"><a>最新上传</a></li>
            <li><a>最热搜索</a></li>
        </ul>
        <div class="over-flow" style="background: #F7F8F8">
            <div class="pic-list content0" style="">
                <span><img src="images/index-1.jpg"></span><span><img src="images/index-2.jpg"></span>
                <span><img src="images/index-3.jpg"></span><span><img src="images/index-4.jpg"></span>
                <span><img src="images/index-5.jpg"></span><span><img src="images/index-6.jpg"></span><span><img src="images/index-7.jpg"></span>
            </div>
            <div class="wendang-list content1" style="display: none;">
                <ul class="wendang-list">
                    <li class="over-flow">
                        <dl>
                            <dt class="over-flow pull-left"><img src="images/sub/wendang-icon.png"></dt>
                            <dd class="over-flow pull-left">
                                <p class="title">新白沙沱大桥首对斜拉索挂设成功</p>
                                <p class="time">发布时间：2015-08-13</p>
                                <dl class="desc">
                                    <dt class="pull-left" style="width: 50px;;">简介：</dt>
                                    <dd class="pull-left" style="width:84% ">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd>
                                </dl>
                            </dd>
                        </dl>
                    </li>
                    <li class="over-flow">
                        <dl>
                            <dt class="over-flow pull-left"><img src="images/sub/wendang-icon.png"></dt>
                            <dd class="over-flow pull-left">
                                <p class="title">新白沙沱大桥首对斜拉索挂设成功</p>
                                <p class="time">发布时间：2015-08-13</p>
                                <dl class="desc">
                                    <dt class="pull-left" style="width: 50px;;">简介：</dt>
                                    <dd class="pull-left" style="width:84% ">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd>
                                </dl>
                            </dd>
                        </dl>
                    </li>
                    <li class="over-flow">
                        <dl>
                            <dt class="over-flow pull-left"><img src="images/sub/wendang-icon.png"></dt>
                            <dd class="over-flow pull-left">
                                <p class="title">新白沙沱大桥首对斜拉索挂设成功</p>
                                <p class="time">发布时间：2015-08-13</p>
                                <dl class="desc">
                                    <dt class="pull-left" style="width: 50px;;">简介：</dt>
                                    <dd class="pull-left" style="width:84% ">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd>
                                </dl>
                            </dd>
                        </dl>
                    </li>
                </ul>
            </div>
            <div class="shipin-list-box content2" style="display: none;">
                <ul class="shipin-list">
                    <li><a><img src="images/sub/shipi-box.png"></a></li>
                    <li><a><img src="images/sub/shipi-box.png"></a></li>
                    <li><a><img src="images/sub/shipi-box.png"></a></li>
                    <li><a><img src="images/sub/shipi-box.png"></a></li>
                    <li><a><img src="images/sub/shipi-box.png"></a></li>
                    <li><a><img src="images/sub/shipi-box.png"></a></li>
                    <li><a><img src="images/sub/shipi-box.png"></a></li>
                    <li><a><img src="images/sub/shipi-box.png"></a></li>
                    <li><a><img src="images/sub/shipi-box.png"></a></li>
                </ul>
            </div>
        </div>


    </div>
    <div class="main-right-box">
        <div>
            <script>
                $(function(){
                    $('.type-list span' ).each(function(){
                        $(this ).click(function(){
                            $(this ).siblings('span').removeClass('active')
                            $(this ).addClass('active')
                        })
                    })
                })
            </script>

            <div class="title-box text-center">高级检索</div>
            <div class="info">
            <table width="100%">
                <tr>
                    <td>资源类型</td>
                    <td class="type-list" style="text-align: left;"><span class="active">图片</span><span>文档</span><span>视频</span></td>
                </tr>
                <tr>
                    <td>文档名称</td>
                    <td><input class="gaoji-search-input"></td>
                </tr>
                <tr>
                    <td>撰稿人</td>
                    <td><input class="gaoji-search-input"></td>
                </tr>
                <tr>
                    <td>撰稿地点</td>
                    <td><input class="gaoji-search-input"></td>
                </tr>
                <tr>
                    <td>起始时间</td>
                    <td><input class="gaoji-search-input"></td>
                </tr>
                <tr><td colspan="2"><div style="text-align: center;background: #208ECF;height: 30px;line-height: 30px;color: #fff;">高级检索</div></td></tr>
            </table>
        </div>
        </div>
        <div>


            <div class="title-box text-center" style="margin-top: 15px;">热点词条</div>
            <div class="info">
                <ul class="hot-words over-flow" style="background: #F7F8F8;">
                    <li><a>重庆成渝高速</a></li>
                    <li><a>重庆成渝高速</a>
                    <li><a>高速公路</a>
                    <li><a>高速公路</a>
                    <li><a>高速公路</a>
                    <li><a>高速公路</a>
                    <li><a>高速公路</a>
                    <li><a>高速公路</a>
                    <li><a>高速公路</a>
                    <li><a>高速公路</a>
                    <li><a>高速公路</a>
                    <li><a>高速公路</a>
                    <li><a>高速公路</a>
                    <li><a>高速公路</a>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="foot over-flow clearfix">
    <div class="foot-box">
        <div class="over-flow" style="background: url(images/foot-bg.png) top right no-repeat;height: 120px;">
            <div class="box content text-center">
                <p>您是第<span style="background: #909090;color: #fff;display: inline-block;padding: 0px 3px;margin: 0px 8px;">6879456</span>位访者</p>
                <p>2013&nbsp;&nbsp;版权所有&nbsp;&nbsp;重庆市交通委员会&nbsp;&nbsp;联系电话：023-8918300&nbsp;&nbsp;传真：023-89183222<span style="display: inline-block;background: url(images/foot-2.png) left center no-repeat;padding-left: 20px;">渝ICP备0978456号</span></p>
                <p>技术支持：重庆旺山实业有限公司</p>
            </div>

        </div>
    </div>
</div>
</body>
</html>